<template>
  <DynForm
    ref="DynFormRef"
    :form-data="formData"
    :expand="true"
    :form-item-arr="formItemArr"
    :form-item-comp-name-map="formItemCompNameMap"
    :el-form-props="{ inline: true }"
    class="personDynForm"
  >
    <template #extraElFormItems>
      <el-button type="primary" @click="onSearch">查询</el-button>
    </template>
  </DynForm>
</template>

<script setup lang="ts">
// TODO 待自行删减多余的资源引入, 以及引入typing.d.ts的类型定义
import {
  DynForm,
  DynItemInput,
  DynItemInputNumber,
  DynItemDate,
  DynItemSelect,
  DynItemRadio,
} from '@ui/base-comp'
import type { FormItemConfig, VueComp, DynFormType } from '@ui/base-comp'
import '@ui/base-comp/dist/style.css'
import { ref } from 'vue'
import type { PersonFormData } from './typing.d.ts'
import { cloneDeep } from 'lodash-unified'

const $emits = defineEmits<{
  search: [val: PersonFormData]
}>()

const formItemCompNameMap = new Map<string, VueComp>()
formItemCompNameMap.set('DynItemInput', DynItemInput)
formItemCompNameMap.set('DynItemInputNumber', DynItemInputNumber)
formItemCompNameMap.set('DynItemDate', DynItemDate)
formItemCompNameMap.set('DynItemSelect', DynItemSelect)
formItemCompNameMap.set('DynItemRadio', DynItemRadio)

const DynFormRef = ref<DynFormType>()
const formItemArr = ref<FormItemConfig[]>([
  {
    classify: 'formItem',
    name: 'DynItemInput',
    clearable: true,
    label: '姓名',
    prop: 'name',
    placeholder: '请输入...',
  },
  {
    classify: 'formItem',
    name: 'DynItemSelect',
    clearable: true,
    label: '性别',
    prop: 'male',
    placeholder: '请选择...',
    loadOptionsMethod: () => {
      // TODO 请补充可选数据
      return Promise.resolve([
        { value: 'male', label: '男' },
        { value: 'female', label: '女' },
      ])
    },
  },
])

const formData = ref<PersonFormData>({
  /**
   * 姓名
   */
  name: '',
  /**
   * 性别
   */
  male: undefined,
})
function onSearch() {
  $emits('search', cloneDeep(formData.value))
}
defineExpose({ DynFormRef })
</script>
<style scoped lang="scss">
.personDynForm {
  ::v-deep(.dyn-item---male) {
    width: 180px;
  }
}
</style>
